*{
    margin: 0;
    padding: 0;
}

.box{
    display: flex;
    width: 400px;
    height: 100px;
    margin: 200px auto;
    .item{
        position: relative;
        width: 100px;
        height: 100px;
        border: 1px dashed #000;
        font-size: 48px;
        .flag{
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 0;
            background-color: rgba(0,0,0,.5);
        }
        .text{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            background-color: #000;
            color: #fff;
        }

        &:active  .flag {
            width: 100%;
            height: 100%;
        }
    }

}

@for $i from 1 to 5 {
    .item:nth-child(#{$i}) .text{
        transform: rotate(#{random(360)}deg)
                   translate(#{random(400) - 50}px,#{random(100) + 100}px)
        ;
    }
}
.text{
    transition: 9999s 9999s;
}

.flag:hover + .text{
    transition: 0s;
    transform: translate(0,0);

}

